<template>
  <div>
    <div class="flex-start tbox">
      <span class="t1">搜索用户关键字:</span>
      <el-input
        placeholder="请输入搜索的关键字"
        prefix-icon="el-icon-search"
        v-model="content"
        class="w"
      >
      </el-input>
      <div style="margin-left: 25px">
        <el-button type="danger" icon="el-icon-search">搜索</el-button>
      </div>

      <!-- 选择类型框 -->
      <div style="margin-left: 100px">
        <span class="t1">请选择用户类别:</span>
        <el-select
          v-model="value"
          clearable
          placeholder="请选择"
          style="width: 150px"
          @clear="clear"
          @change="xialachange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div style="margin-left: 25px" @click="search1">
        <el-button type="danger" icon="el-icon-search">搜索</el-button>
      </div>

      <div style="margin-left: 65px" @click="add">
        <el-button type="danger" icon="el-icon-attract">增加用户</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100vw"
      :header-cell-style="tableHeaderColor"
    >
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column
        fixed
        prop="useriid"
        align="center"
        label="用户编号"
        width="130"
      >
      </el-table-column>

      <el-table-column label="用户图片" align="center" width="150">
        <template slot-scope="scope">
          <el-popover placement="top-start" title="" trigger="hover">
            <!-- 预览时的图片 -->
            <img
              :src="scope.row.userimg"
              alt=""
              style="width: 150px; height: 150px"
            />
            <!-- 真正的图片 -->
            <img
              slot="reference"
              :src="scope.row.userimg"
              style="width: 70px; height: 70px"
            />
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column
        prop="username"
        align="center"
        label="用户名"
        width="150"
      >
      </el-table-column>

      <el-table-column
        prop="userphone"
        align="center"
        label="用户电话"
        width="150"
      >
      </el-table-column>

      <el-table-column
        prop="useraddress"
        align="center"
        label="用户地址"
        width="200"
      >
      </el-table-column>

      <el-table-column
        prop="useremail"
        align="center"
        label="用户邮箱"
        width="250"
      >
      </el-table-column>

      <el-table-column
        prop="usersex"
        align="center"
        label="用户性别"
        width="100"
      >
      </el-table-column>

      <el-table-column
        prop="userjiebie"
        align="center"
        label="用户级别"
        width="160"
      >
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码数 -->
    <div class="flex-center" style="margin-top: 20px">
      <el-pagination
        background
        layout="total,prev, pager, next"
        :total="datalength"
        :page-size="pagesSize"
        @current-change="changesize"
      >
      </el-pagination>
    </div>

    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>是否确认删除用户id为{{ iid }}?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="suredelete">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑菜单 ----------------------------------->
    <el-dialog title="用户编辑" :visible.sync="openbianji" width="33%">
      <!-- 编辑的区域 -->
      <div class="flex-between">
        <div class="flex-end w45">
          <span class="t1">用户编号:</span>
          <el-input
            prefix-icon="el-icon-star-off"
            v-model="bjdetail.useriid"
            style="width: 160px"
          />
        </div>
        <div class="flex-end w45">
          <span class="t1">用户图片:</span>
          <el-input
            placeholder="请输入用户图片地址"
            prefix-icon="el-icon-tickets"
            v-model="bjdetail.userimg"
            style="width: 170px"
          />
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div class="flex-end w45">
          <span class="t1">用户姓名:</span>
          <el-input
            placeholder="请输入用户名"
            prefix-icon="el-icon-star-off"
            v-model="bjdetail.username"
            style="width: 160px"
          />
        </div>
        <div class="flex-end w45">
          <span class="t1">用户地址:</span>
          <el-input
            placeholder="请输入用户地址"
            prefix-icon="el-icon-tickets"
            v-model="bjdetail.useraddress"
            style="width: 170px"
          />
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div class="flex-end w45">
          <span class="t1">用户电话:</span>
          <el-input
            placeholder="请输入用户电话"
            prefix-icon="el-icon-star-off"
            v-model="bjdetail.userphone"
            style="width: 160px"
          />
        </div>
        <div class="flex-end w45">
          <span class="t1">用户性别:</span>
          <el-select
            v-model="bjdetail.usersex"
            placeholder="请选择用户性别"
            style="width: 170px"
            @change="bjchange2"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div class="flex-end w45">
          <span class="t1">用户邮箱:</span>
          <el-input
            placeholder="请输入用户邮箱"
            prefix-icon="el-icon-star-off"
            v-model="bjdetail.useremail"
            style="width: 160px"
          />
        </div>
        <div class="flex-end w45">
          <span class="t1">用户级别:</span>
          <el-select
            v-model="bjdetail.userjiebie"
            placeholder="请选择用户级别"
            style="width: 170px"
            @change="bjchange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="openbianji = false">取 消</el-button>
        <el-button type="primary" @click="surebianji">确 定</el-button>
      </span>
      <!-- 编辑结束 -->
    </el-dialog>

    <!-- 弹窗组件 -->
    <usertan ref="usertanz" @adddetail2="adddetail"></usertan>
  </div>
</template>

<script>
import usertan from "../../cpmponent/usertan.vue";
export default {
  created() {
    console.log("当前路由", this.$route);
    window.localStorage.setItem("userlist", JSON.stringify(this.tableData));
    let m = {};
    m.path = this.$route.path;
    m.name = this.$route.name;
    m.type = "";
    this.$store.commit("addrouterlist", m);
  },
  components: {
    usertan,
  },
  data() {
    return {
      tableData: [
        {
          useriid: 1,
          userimg: "https://picsum.photos/100/100",
          username: "库里",
          userphone: "13154563216",
          useraddress: "广东省江门市会城镇",
          useremail: "2371656782@qq.com",
          userjiebie: "超管人员",
          usersex: "男",
        },
        {
          useriid: 2,
          userimg: "https://picsum.photos/100/100",
          username: "詹姆斯",
          userphone: "13154563216",
          useraddress: "广东省江门市会城镇",
          useremail: "2371656782@qq.com",
          userjiebie: "普管人员",
          usersex: "男",
        },
        {
          useriid: 3,
          userimg: "https://picsum.photos/100/100",
          username: "欧文",
          userphone: "13154563216",
          useraddress: "广东省江门市会城镇",
          useremail: "2371656782@qq.com",
          userjiebie: "普通人员",
          usersex: "男",
        },
      ],
      pagesNum: 1,
      pagesSize: 7,
      content: "",
      options: [
        {
          value: "超管人员",
          label: "超管人员",
        },
        {
          value: "普管人员",
          label: "普管人员",
        },
        {
          value: "普通人员",
          label: "普通人员",
        },
      ],
      options2: [
        {
          value: "男",
          label: "男",
        },
        {
          value: "女",
          label: "女",
        },
      ],
      value: "",
      dialogVisible: false,
      openbianji: false,
      zindex: 0,
      iid: "",
      bjdetail: {},
    };
  },
  computed: {
    datalength() {
      return this.tableData.length;
    },
  },
  methods: {
    // 返回的增加用户组件
    adddetail(e) {
      this.tableData.splice(0, 0, e);
      this.$message.success("增加用户成功");
      this.$refs.usertanz.close();
    },
    // 增加商品
    add() {
      this.$refs.usertanz.open();
    },
    // 编辑选择框性别改变的
    bjchange2(e) {
      console.log("选择框的内容", e);
      this.bjdetail.usersex = e;
    },
    // 编辑选择框级别改变的
    bjchange(e) {
      console.log("选择框的内容", e);
      this.bjdetail.userjiebie = e;
    },
    // 商品照片上传成功的回调
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 编辑成功的回调
    surebianji() {
      this.openbianji = false;
      this.tableData[this.zindex] = this.bjdetail;
      this.$message.success("编辑商品成功");
    },
    // 确认弹窗进行回调
    suredelete() {
      this.dialogVisible = true;
      this.tableData.splice(this.zindex, 1);
      this.$message.success("删除用户成功");
      this.dialogVisible = false;
    },
    // 清除选项
    clear() {
      this.value = "";
      this.tableData = JSON.parse(window.localStorage.getItem("userlist"));
    },
    // 搜索用户类型
    search1() {
      if (this.value == "") {
        this.$message.error("请选择用户类别");
        return;
      }
      this.tableData = JSON.parse(window.localStorage.getItem("userlist"));
      this.tableData = this.tableData.filter((item) => {
        console.log("item", item.userjiebie, this.value);
        return item.userjiebie === this.value;
      });
    },
    // 下拉框改变事件
    xialachange(e) {
      console.log("选择框的内容", e);
      this.value = e;
    },
    // 改变页码进行触发事件
    changesize(e) {
      console.log("页码", e);
      this.pagesNum = e;
    },
    //设置表格行的样式
    rowStyle({ row, rowIndex }) {
      let styleJson1 = {
        "text-align": "center",
      };
      return styleJson1;
    },
    //设置表头行的样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      let styleJson = {
        "text-align": "center",
      };
      return styleJson;
    },
    // 编辑开始
    handleEdit(index, row) {
      console.log(index, row);
      this.openbianji = true;
      this.zindex = index;
      this.bjdetail = row;
    },
    // 删除开始
    handleDelete(index, row) {
      console.log(index, row);
      this.dialogVisible = true;
      this.zindex = index;
      this.iid = row.iid;
    },
  },
};
</script>

<style scoped>
.tbox {
  margin-bottom: 20px;
}
.w {
  width: 190px;
}
.w45 {
  width: 45%;
}
.t1 {
  padding-right: 10px;
  color: #545c64;
  font-weight: bold;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 108px;
  height: 108px;
  line-height: 108px;
  text-align: center;
}
.avatar {
  width: 108px;
  height: 108px;
  display: block;
}
</style>